<template>
  <div class="mainbody">
    <el-container>
        <el-header height="150px" style="width: 1500px;">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <div style="position:relative;color: #ff6633;">
                            <div style="position: absolute;height:75px;width: 100%;line-height:120px;font-size:24px;font-weight: 600;">购物系统</div>
                            <div style="position: absolute;height:75px;width: 100%;line-height:10px;top:75px;font-size: 18px;font-weight: 500;">gouwuxitong</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">&nbsp;</div>
                </el-col>
                <el-col :span="8" >
                    <div class="grid-content bg-purple">
                        <div>
                            <div style="height:75px;width: 100%;line-height:150px;font-size:34px;font-weight: 600; ">登录界面</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main style="width: 1500px;">
            <el-row>
                <el-col :span="6">&nbsp;</el-col>
                <el-col :span="12">
                    <el-form class="from" style="background: rgb(235, 230, 230);width:70%;margin:0 auto;height: 355px;margin-top:55px;">
                        <el-form-item>
                            <h2> 登录页面</h2>
                        </el-form-item>
                        <el-form-item style="margin-top:-30px;;">
                            <div style="margin-left: -200px;"><span>*</span>
                            用户名：</div>
                            <el-input placeholder="用户名" v-model="userName" style="width:50%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div style="margin-left: -210px;"><span>*</span>
                                密码：</div>
                            <el-input placeholder="密码" v-model="passWord" style="width:50%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="checkLogin">登录</el-button>
                            <div style="margin-left:300px;color:blue" @click="goToRegistration">
                                <span>免费注册</span>
                                </div>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="6">&nbsp;</el-col>
            </el-row>

        </el-main>
        <el-footer height="80px" style="width: 1500px;">作者：咕嘟[gudoo]</el-footer>
    </el-container>
  </div>
</template>

<script>
import {login,userInfo} from "../ajax/get"
export default {
    name: "ShopLogin",
    // 只用于自定义属性,自定义属性要写在return{}的大括号
    data () {
        return {
            userName: "",  // 接收用户名
            passWord: "", // 密码
        };
    },
    methods: {
        // 打印userName值
        showUserName() {
            let userName = "1111";
            console.log("userName值:",userName, "===",this.userName);
        },
        // 检查登录
        checkLogin() {
            if (this.userName ==  null || this.userName == "") {
                this.$message.error("用户名不能为空!");
                return;
            }
            if (this.passWord ==  null || this.passWord == "") {
                this.$message.error("密码不能为空!");
                return;
            }
            let user;
            if (this.userName !=null && this.userName != "") {
                user = this.userName;
            } else {
                user = sessionStorage.getItem("userName");
            }
            login(user,this.passWord).then(res => {
                console.log(res);
                if (res.data.code == 5000) {
                    this.$message.error(res.data.msg);
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    userInfo(this.userName).then(users => {
                        console.log("用户信息",users);
                        // 赋值全局变量
                        sessionStorage.setItem("userName",this.userName);
                        this.$root.userName = user;
                        console.log(this.$route.query.path);
                        if (this.$route.query.path == null || this.$route.query.path == "") {
                            if(users.data.data.isAdmin == 1) {
                                // 前往管理员界面
                                this.$router.push("/shopAdminMain");
                            } else {
                                this.$router.push("/ShoppingMall");
                            }
                        } else {
                            this.$router.push("/"+this.$route.query.path);
                        }
                        // if(users.data.data.isAdmin == 1) {
                        //     // 前往管理员界面
                        //     this.$router.push("/shopAdminMain");
                        // } else {
                        //     this.$router.push("/ShoppingMall");
                        // }
                    })
                }
            })
        },
        goToRegistration() {
            this.$router.push("/shopRegist");
        }
       
    }
}
</script>

<style scoped>
    @import "../assets/css/shopLogin.css";
</style>